<!DOCTYPE html>
<html>
	<head>
		<title>lazy</title>
		<style>
			body{
				margin:0;
				padding:0;
				font-size:14px;
			}
			
			#box{
				width:1200px;
				margin:0px auto;
				background-color:lightgrey;
				padding-top:20px;
				border:1px solid green;
				box-sizing:border-box;

				overflow:hidden;
			}
			ul>li{
				float:left;
				width:265px;;
				height:200px;
				border:1px solid black;
				list-style:none;
				margin-bottom:10px;
				margin-left:10px;
				text-align:center;
				line-height:200px;
				box-sizing:border-box;
			}
			img{
				width:100%;
				height:100%;
			}
		</style>
	</head>
	<body>
		<ul id="box">
			
		</ul>
		
		<script>
			window.onload = function(){
				var ulEle = document.getElementById("box");
				var htmlStr="";
				for(var i=0;i<100;i++){
					htmlStr+='<li><img src="" data-src="./123.gif" alt="1358407的图片"></li>';
				}
				ulEle.innerHTML=htmlStr;
				
				var liEle = document.querySelectorAll("#box>li>img");			
				var viewHeight = document.documentElement.clientHeight // 可视区域的高度
				
				function lazyload(){
					for(var i=0;i<liEle.length;i++){
						var rec = liEle[i].getBoundingClientRect();
						if(rec.bottom>100&&rec.top<viewHeight-100){
							liEle[i].setAttribute("src",liEle[i].getAttribute("data-src"));
						}
					}
				}
				lazyload();
				document.addEventListener('scroll', lazyload)
			}
		</script>
	</body>
</html>